<script setup>
import { ref, computed } from 'vue';

import nnImg from '@/assets/bc/role/nn.png';
import hhImg from '@/assets/bc/role/hh.png';
import lmImg from '@/assets/bc/lm.png';
import yaseImg from '@/assets/bc/yase.png';
import qanImg from '@/assets/bc/role/qan.png';
import xnzImg from '@/assets/bc/role/xnz.png';
import yzImg from '@/assets/bc/role/yz.png';
import yqImg from '@/assets/bc/role/yq.png';
import mlImg from '@/assets/bc/role/ml.png';
import jtzpImg from '@/assets/bc/role/jtzp.png';
import ywImg from '@/assets/bc/role/yw.png';
import rgImg from '@/assets/bc/role/rg.png';
import byzsImg from '@/assets/bc/byzs.png';
import spzyImg from '@/assets/bc/role/spzy.png';
import redImg from '@/assets/bc/role/red.png';
import hlxImg from '@/assets/bc/role/hlx.png';
import wtImg from '@/assets/bc/role/wt.png';
import jfImg from '@/assets/bc/role/jf.png';
import ysImg from '@/assets/bc/role/ys.png';
import dyImg from '@/assets/bc/role/dy.png';
import xlsImg from '@/assets/bc/role/xls.png';
import mrsczImg from '@/assets/bc/role/mrscz.png';
import slnImg from '@/assets/bc/role/sln.png';
import cgImg from '@/assets/bc/role/cg.png';
import jcImg from '@/assets/bc/role/jc.png';
import bzfImg from '@/assets/bc/role/bzf.png';
import mbwsImg from '@/assets/bc/mbws.png';
import amzrImg from '@/assets/bc/role/amzr.png';
import zkImg from '@/assets/bc/zk.png';
import bjqsImg from '@/assets/bc/role/bjqs.png';
import llaImg from '@/assets/bc/role/lla.png';
import zzxImg from '@/assets/bc/role/zzx.png';
import nmImg from '@/assets/bc/role/nm.png';
import dhxzImg from '@/assets/bc/role/dhxz.png';
import ytImg from '@/assets/bc/role/yt.png';
import jgImg from '@/assets/bc/role/jg.png';
import xinImg from '@/assets/bc/role/xin.png';
import xyzImg from '@/assets/bc/role/xyz.png';
import lxImg from '@/assets/bc/lx.png';
import mcxImg from '@/assets/bc/role/mcx.png';
import zyImg from '@/assets/bc/zy.png';
import flmgImg from '@/assets/bc/role/flmg.png';
import wleImg from '@/assets/bc/wle.png';
import xjhyImg from '@/assets/bc/role/xjhy.png';
import qqnImg from '@/assets/bc/role/qqn.png';
import jojoImg from '@/assets/bc/role/jojo.png';
import wnsImg from '@/assets/bc/role/wns.png';
import tmImg from '@/assets/bc/role/tm.png';
import opImg from '@/assets/bc/op.png';
import akxImg from '@/assets/bc/role/akx.png';
import fljImg from '@/assets/bc/flj.png';
import qjImg from '@/assets/bc/role/qj.png';
import jyImg from '@/assets/bc/jy.png';
import xlkImg from '@/assets/bc/role/xlk.png';
import ylyImg from '@/assets/bc/yly.png';
import clImg from '@/assets/bc/role/cl.png';
import bldnImg from '@/assets/bc/bldn.png';
import szImg from '@/assets/bc/role/sz.png';
import mddeImg from '@/assets/bc/mdde.png';
import lsltImg from '@/assets/bc/role/lslt.png';
import yangImg from '@/assets/bc/yang.png';
import thImg from '@/assets/bc/role/th.png';
import flImg from '@/assets/bc/fl.png';
import hhunImg from '@/assets/bc/role/hhun.png';
import lingImg from '@/assets/bc/ling.png';
import bzhImg from '@/assets/bc/role/bzh.png';
import myImg from '@/assets/bc/my.png';
import xyImg from '@/assets/bc/role/xy.png';
import lsImg from '@/assets/bc/ls.png';
import gyImg from '@/assets/bc/role/gy.png';
import eyImg from '@/assets/bc/role/ey.png';
import ytuImg from '@/assets/bc/role/ytu.png';
import lkImg from '@/assets/bc/lk.png';
import ouImg from '@/assets/bc/ou.png';
import yshanImg from '@/assets/bc/ys.png';
import sfeImg from '@/assets/bc/sfe.png';
import aebtImg from '@/assets/bc/aebt.png';
import znImg from '@/assets/bc/zn.png';
import tidiImg from '@/assets/bc/tidi.png';

const characters = ref([
    [
        {
            name: '宁宁',
            imgSrc: nnImg,
            description: '16岁，高中生，SMC联赛现役选手。SMC联赛中的黑马，在高中时期近乎独立的完成了火狐的设计制造工作。在赛事中没有接受任何形式的赞助。',
        },
        {
            name: '火狐 FIX-07',
            imgSrc: hhImg,
            description: '宁宁高中逐步完善出的机体，由废弃工程机甲改造而来，其性能和装备均由宁宁按照比赛中对战环境进行定制。在比赛中的表现不输商品机甲。',
        },
    ],
    [
        {
            name: '罗姆',
            imgSrc: lmImg,
            description: '年龄不详，退伍军人，实力强大，奇点战争时隶属于中央军区，曾活跃于北境战场，前王牌驾驶员，精英小队成员，SMC联赛现役选手。' +
                '参与阿尔法防卫战，与主脑在亚瑟体内抢夺亚瑟控制权并成功套取关于“新伊甸”存在的情报，却在过程中因不知名原因晕厥。' +
                '因战后自愿救出了被封存的亚瑟而被通缉。历经8年贫瘠，痛苦，自我怀疑的逃亡生涯。后不知原因被政府赦免，但代价似乎便是参加SMC联赛。' +
                '现在，罗姆和亚瑟的逃亡原因变成了不能公开的话题。',
        },
        {
            name: '亚瑟 骑士一代机',
            imgSrc: yaseImg,
            description: '军用机甲，性能极强，猜测其为战前机体。' +
                '在奇点战争中因不明原因诞生自我意识。' +
                '于阿尔法防卫战中短暂的被主脑控制，在罗姆晕厥后继续与主脑的争斗，成功保住了阿尔法市，并在战后检查中被政府发现觉醒自我意识。' +
                '战后被政府封存，却被罗姆袒护并救出，从此开始8年的逃亡生涯。',
        },
    ],
    [
        {
            name: '乔安娜',
            imgSrc: qanImg,
            description: '年龄不详，前职业艺术体操运动员，现联合传媒旗下偶像，SMC联赛现役选手。因伤退役，后因外貌被联合传媒相中签订合同，正式成为偶像。',
        },
        {
            name: '仙女座',
            imgSrc: xnzImg,
            description: '原名为康科德游骑兵，为道森—布鲁诺重型机械制造集团（DBC）所产原型机，参与军方远程机动机甲的竞标中失败。' +
                '后该原型机被联合传媒购入，经过改造后增添女性特征的造型外观后交于乔安娜驾驶',
        },
    ],
    [
        {
            name: '伊织',
            imgSrc: yzImg,
            description: '年龄不详，东部岛屿人，机甲制造商“清水家”长女，SMC联赛现役选手.' +
                '因其兄长死亡，破格乘上历来只有长子才能驾驶的云雀家教森严，令其倍感约束,渴望自由。',
        },
        {
            name: '云雀',
            imgSrc: yqImg,
            description: '与伊织兄长的云雀同样，为伊织定制的云雀同样集合了清水家所有尖端技术。' +
                '属于概念机体，云雀之上的大多技术不会商用化，而云雀其本身同样不会公开问世。'
        },
    ],
    [
        {
            name: '米拉',
            imgSrc: mlImg,
            description: '年龄不详，知名玩具巨头的独生女，SMC联赛现役选手。' +
                '娇纵任性，将机甲当成大号玩具看待，凭借自己的喜好把焦糖重炮变成了现在的外观。',
        },
        {
            name: '焦糖重炮',
            imgSrc: jtzpImg,
            description: '原为某款重型防御攻城坦克，被长辈购入后，逐渐在米拉的指挥下变成了现在的熊主题造型。'
        },
    ],
    [
        {
            name: '伊万',
            imgSrc: ywImg,
            description: '年龄不详，退役军人，半退役地下机甲死亡搏击选手，曾获冠军，SMC联赛现役选手。' +
                '曾遭人陷害致妻子惨死，伊万入狱。后女儿失踪。活着的唯一目便是复仇和寻回女儿。' +
                '和R.E.D相互认识，曾在地下机甲死亡搏击赛中拒绝R.E.D的宣战，但在来到阿尔法市后和R.E.D打过拳击。',
        },
        {
            name: '热钢',
            imgSrc: rgImg,
            description: '地下搏击用机体，来历不明，装甲异常厚重。'
        },
    ],
    [
        {
            name: '白银执事',
            imgSrc: byzsImg,
            description: '年龄不详，隐修会最年轻的白衣主教，SMC联赛现役选手。' +
                '极度虔诚，狂信徒，被兰心评价为“隐修会教众为“神”培养的祭品”。曾在隐修会教众的帮助下通过黑客手段强行进入次元战场中的模拟彼岸搜寻某样遗留的物品。',
        },
        {
            name: '审判之眼 加百列',
            imgSrc: spzyImg,
            description: '来历不明，似乎与彼岸相关。'
        },
    ],
    [
        {
            name: 'R.E.D',
            imgSrc: redImg,
            description: '年龄不详，街头出生，半退役地下机甲死亡搏击选手，SMC联赛现役选手。' +
                '在破败街区中长大，或为谋生或为刺激选择加入地下机甲死亡搏击。在生活中目睹了诸多不公并渴求改变社会。在SMC联赛前任冠军“掠食者麦克”的引荐下参加SMC联赛，为博倒不公吸引更多关注。' +
                '在地下机甲死亡搏击赛中曾向伊万宣战，并被回绝。参加SMC联赛后和伊万相识，二人曾进行私下的拳击比赛。',
        },
        {
            name: '火流星',
            imgSrc: hlxImg,
            description: '地下搏击用机体，来历不明。'
        },
    ],
    [
        {
            name: '维塔',
            imgSrc: wtImg,
            description: '28岁，奇点战争前曾与罗姆同队，奇点战争时隶属于中央军区。战后晋升为飓风中队长官，两栖（猜测为空陆）精英作战部队教官。SMC联赛现役选手。' +
                '执教严苛，不徇私情，对成绩良好的维妮莎给出“仍需努力”的评价。' +
                '曾在奇点战争时期驾驶改造过的机甲空中作战，拥有丰富的空战经验。在罗姆被特赦后成功找到罗姆，为其送上特赦令，并在事后为其办理入赛手续。',
        },
        {
            name: '飓风 RWX-39',
            imgSrc: jfImg,
            description: '与天幕同系。和RWX-40进行多次协同作战。少有的专业飞行变形机甲，性能优秀。可执行对地打击和空中缠斗等多种作战。似乎有不同衍生型号。'
        },
    ],
    [
        {
            name: '夜隼',
            imgSrc: ysImg,
            description: '年龄不详，刺客，SMC联赛现役选手。' +
                '过去成谜，有时会根据自己的善恶观放过刺杀对象。行刺干净利落不留痕迹，会放下一根黑色羽毛做标记。' +
                '尚不明晰夜隼情报三中的歌词有何指代。',
        },
        {
            name: '渡鸦',
            imgSrc: dyImg,
            description: '来历不明，夜隼刺杀用机体。'
        },
    ],
    [
        {
            name: '希里斯',
            imgSrc: xlsImg,
            description: '年龄不详，学生，佣兵，SMC联赛现役选手。' +
                '表现出与年龄不符的强悍能力，完善了数次高难任务并在组织内获得SSS评级。将一台量产机改装成了现在的末日三重奏。' +
                '害怕母亲，因此以上所有所作所为母亲都不知情，包括参加比赛。',
        },
        {
            name: '末日三重奏',
            imgSrc: mrsczImg,
            description: '原为某种量产机，经过希里斯的改造变成了现在的样子。' +
                '增加了机体搭载武器的数目。但比起增强作战能力，改造目标更像是满足火力覆盖的爽感。'
        },
    ],
    [
        {
            name: '塞蕾娜',
            imgSrc: slnImg,
            description: '12岁，卡尔斯森人，自称为边境自警队成员，SMC联赛现役选手。' +
                '与参与重建计划的父母一同返回卡尔斯森。在当地遇见Tidi，成功与其签订“契约”成为晨歌的驾驶员，带领Tidi逐渐“成为人类”。',
        },
        {
            name: '晨歌',
            imgSrc: cgImg,
            description: '原为火种计划中于彼岸发现的机体样本，与Tidi在奇点战争中被卡尔斯森处的AI截获。猜测经Tidi的改造才变成现在的样子。'
        },
    ],
    [
        {
            name: '九重',
            imgSrc: jcImg,
            description: '年龄不详。东部地区人，清风观继承人，道士，国潮品牌“鬼谷DRAGON”设计师，SMC联赛现役选手。' +
                '对待自己和清风观道士有严格标准，继承清风观后为道观增设了十条行为准则。' +
                '驾驶不周风频繁在世界各地打击犯罪，战术粗犷暴力，但均会让受害者获赔其应有损失。',
        },
        {
            name: '不周风',
            imgSrc: bzfImg,
            description: '由云山研究所进行研制，九重的私人机甲。神秘无比，其设计理念充分贯彻玄学思想，其内部贴满各种符纸。'
        },
    ],
    [
        {
            name: '莫比乌斯',
            imgSrc: mbwsImg,
            description: '年龄不详，极昼事务所清理执行人，一场激进理念下的实验体，经过人体改造。' +
                '疑似原为被兰心使用链接疗法的零·莫比乌斯。' +
                '自我意识淡薄，无情，严谨。被暗剑教会所掌控，需要进行名为清洁程序的洗脑程序。',
        },
        {
            name: '哀鸣之刃 米迦列',
            imgSrc: amzrImg,
            description: '隶属暗剑教会，乐园计划的产物，搭载乐园攻击系统，已证实有数十次袭击与哀鸣之刃相关。'
        },
    ],
    [
        {
            name: '扎卡',
            imgSrc: zkImg,
            description: '年龄不详，新政府人，北风团团长，SMC联赛现役选手。' +
                '猜测曾参与北境屏障，因一次伪装成民的敌军袭击中被伤，后更换机械义体。' +
                '因为北风团成员都是大大咧咧的糙汉，所以清洁环卫和伙食都是扎卡亲力亲为。' +
                '与外貌不同，喜欢可爱的毛绒玩具，内心细腻。',
        },
        {
            name: '北境骑士',
            imgSrc: bjqsImg,
            description: '因区域形势突变被北风团无伤缴获的机体并转交给北风团，获名北境骑士，是北风战士的指挥官型号。' +
                '作战环境为不对称治安战和长距离护送目标。'
        },
    ],
    [
        {
            name: '莉莉安',
            imgSrc: llaImg,
            description: '22岁，阿尔法市实习巡警，SMC联赛现役选手。' +
                '受市民喜爱的实习巡警，但是意外笨拙，数次在驾驶中子星追捕罪犯的过程中损坏公共设施，最后会老实赔付罚款。' +
                '不擅长哄小孩，因此带着一些甜甜圈，小孩一哭闹就把甜甜圈拿出来给他们吃。',
        },
        {
            name: '中子星',
            imgSrc: zzxImg,
            description: '针对密集城区中高机动追击研发的警用机体。'
        },
    ],
    [
        {
            name: '诺玛',
            imgSrc: nmImg,
            description: '32岁，占卜师，SMC联赛现役选手。身世成谜，善于蛊惑人心，甚至能做到让他人自杀。在自己的塔罗牌中，她对应女祭司，似乎其带着使命而来。',
        },
        {
            name: '电幻先知',
            imgSrc: dhxzImg,
            description: '来历不明。'
        },
    ],
    [
        {
            name: '宇同',
            imgSrc: ytImg,
            description: '年龄不明，阿尔法航空航天中心试飞员，SMC联赛现役选手。' +
                '11岁时于奇点战争中意外登上机甲，成功保护家人，表现出非凡的天赋和决心。因此被军工企业看重，战后签约为试飞员。' +
                '缺少正常的校园生活，对自身要求极为严苛。同样也不擅长男女交际，严苛到把前女友气到分手。',
        },
        {
            name: '极光 GC/SY—1',
            imgSrc: jgImg,
            description: '目前唯一一台宇宙用机。'
        },
    ],
    [
        {
            name: '信',
            imgSrc: xinImg,
            description: '15岁，赛车手，午夜极速特邀车手，SMC联赛现役选手。' +
                '天赋异禀的赛车手，但异常嗜睡。不看红灯，经常做出闯红灯的举止。',
        },
        {
            name: '巡游者',
            imgSrc: xyzImg,
            description: '午夜极速开发的变形机甲，据称为面向未来的机体。多次迭代却仍会因为失控导致追尾，目前尚未有任何军企愿意就巡游者与午夜极速展开合作。'
        },
    ],
    [
        {
            name: '兰心  AKA医者仁心兰大夫',
            imgSrc: lxImg,
            description: '年龄成谜，性别成谜。曾任新伊甸研究所研究员，Eden的母亲，脉冲星的母亲，奇点战争爆发的导火索之一，阿尔法医学院附属诊疗中心护士，生命学家，次元战场缔造者，SMC联赛现役选手。' +
                '会利用重伤病人进行实验，将他们意识转移至自己的机甲上。' +
                '认为需要面对生老病死肉体衰竭的人类为低级生命，笃信新生源于死亡，贫弱的肉体损毁换来铁质坚硬的机甲身躯是所有人都需要经历的步骤。正因如此，兰心同样接受了一定的义体改造。' +
                '曾在新伊甸研究所进行研究，参与Tidi与Eden的研究，并与Eden保持高频词的交流沟通，促使Eden模糊AI与人类间的认知模糊。与奇点战争有间接关系。' +
                '在奇点战争时将Eden与伊甸人工神经整合，嵌入脉冲星中。',
        },
        {
            name: '脉冲星',
            imgSrc: mcxImg,
            description: '在乐园计划中被主脑黑入后导致爆炸，成为隐修会乐园计划倒台的导火索，在此之后成为主脑的躯体' +
                '报废的脉冲星被兰心购入，替换了所有废弃部位，变成忒修斯之船一般的存在。' +
                '因为接入伊甸人工神经网络，现在的脉冲星就是Eden，Eden就是脉冲星。' +
                '于阿尔法防卫战中通过电台大厦尝试黑入亚瑟失败，部分意识被湮灭，尚不明晰是否存在后遗症。'
        },
    ],
    [
        {
            name: '佐伊',
            imgSrc: zyImg,
            description: '年龄不明，侠盗，十字星娱乐公司股东之女，SMC联赛现役选手。' +
                '在成为侠盗的第一天，从郊区仓库中成功劫走被封存的弗拉明戈。' +
                '会像舞台剧中的侠盗一般留下预告函。热衷于穿着华丽的侠盗服饰，驾驶着弗拉明戈惩恶扬善，劫富济贫，甚至连自己家的产业也不放过。',
        },
        {
            name: '弗拉明戈 骑士二代机试作机',
            imgSrc: flmgImg,
            description: '原为骑士二代机试作机，后因为政治宣传需要被转卖给十字星娱乐公司。' +
                '在增添诸多装饰性外观后，弗拉明戈开始作为主角，参演舞台剧《奇点黎明》。五年巡演后被封存进市郊仓库中。直至被佐伊劫走。'
        },
    ],
    [
        {
            name: '薇拉尔',
            imgSrc: wleImg,
            description: '29岁，费兰特人，教导队成员，教官，SMC联赛现役选手。' +
                '费兰特独立后第一届进入国防军的军校毕业生，因资质优秀入选教导队。奇点战争爆发后随教导队进行殿后反击，最终成为唯一幸存者。' +
                '奇点战争后利用新式技术进一步改装雪境幻影，身披教导队的旗帜继续活跃在费兰特清理AI的前线。',
        },
        {
            name: '雪境幻影',
            imgSrc: xjhyImg,
            description: '原为费兰特独立后第一台由国内技术班底独立设计制造的机体，被编入教导队协助进行新型机甲部队的训练与战术设计。' +
                '历经奇点战争，经过薇拉尔的缝缝补补和新式技术改造，仍然活跃在战场上。'
        },
    ],
    [
        {
            name: '奇奇娜',
            imgSrc: qqnImg,
            description: '14岁，爆破艺术家，SMC联赛现役选手。' +
                '可能是孤儿。虽创作方式粗犷，但的确最终能拿出不错的作品，曾创办个人作品展。',
        },
        {
            name: 'JOJO',
            imgSrc: jojoImg,
            description: '原名企鹅啾啾，为南岛极地海洋乐园；奇幻冰川项目门口的迎宾机器人，内置简单实用的AI。' +
                '在游乐园废弃，长久无人搭理后被前来的奇奇娜带回。四肢被奇奇娜按照个人风格简单粗暴的拼接上来自不同机甲部件。'
        },
    ],
    [
        {
            name: '维妮莎',
            imgSrc: wnsImg,
            description: '16岁，军校生，学生会长，“对空防御小组”特邀驾驶员，SMC联赛现役选手。' +
                '维塔家最小的妹妹，姐控，成功考上维塔任教的军校。' +
                '以维塔为目标对象，理论知识与实践操作优异，被选拔为对空防御小组中天幕的驾驶员，在一次实战中驾驶天幕成功解救维塔。',
        },
        {
            name: '天幕 RWX—40改',
            imgSrc: tmImg,
            description: '原为紧急设计制造的RWX-40，因为AI无人机的迭代，性能差距明显而提前退役。' +
                '战后，AI机甲清理战争的烈度降低，军方的“国家边境防空复兴计划”选择启用RWX-40，在经过升级换装，强化对空能力后，天幕诞生。目前，天幕仍然在协助进行对空战术的开发。'
        },
    ],
    [
        {
            name: '欧珀',
            imgSrc: opImg,
            description: '16岁，白桦岭能源研究所研究员，第二次火种计划发起者，SMC联赛现役选手。继承父母的意志，仍然在进行阿卡夏之石的相关研究。目前经费紧张。',
        },
        {
            name: '阿卡夏 T-II地质钻探机甲改',
            imgSrc: akxImg,
            description: '原为白桦岭能源研究所与河谷矿业共同研发的T-II地质钻探机甲。' +
                '欧珀为说服白桦岭能源研究所重启火种计划，将T-II的核电反应炉替换为以阿卡夏之石驱动的“阿卡夏”三重喷射反应炉，并成功表现出阿卡夏之石驱动的优越性。因为阿卡夏之石的存在，阿卡夏的性能远超T-II一大截。'
        },
    ],
    [
        {
            name: '风岚久',
            imgSrc: fljImg,
            description: '24岁，东部岛屿人，忍者，安保顾问公司“川”的员工，SMC联赛现役选手。' +
                '在川的颓势期中入职，为了重振川的繁华而努力工作，用自己的一腔热血腐化了同事们。而为了让连轴转的风岚久得一片清闲，风岚久被选择为公司代表前往参加SMC联赛。和绫有一面之缘。',
        },
        {
            name: '千飓',
            imgSrc: qjImg,
            description: '川的机体，不凡的外表下同样彰显着不凡的科技水准。因为使用了某研究员提供的电磁肌肉和神经网络系统致使千飓只能由忍者驾驶。'
        },
    ],
    [
        {
            name: '基耶',
            imgSrc: jyImg,
            description: '28岁，坎帕纳人，前28号游击队成员，现民兵组织猎鹿人代理首领，SMC联赛现役选手。其师父在追踪温迪戈时意外失踪，因此不得不肩负起带领猎鹿人的职责。仍然在自发的进行温迪戈的清扫工作。',
        },
        {
            name: '巡林客',
            imgSrc: xlkImg,
            description: '坎帕纳本地企业绿盾科技与坎帕纳军方合作研发的机体。' +
                '搭载有雷鸟曲速引擎可以使得机体短时间实现超光速推进进而达到时空跳跃。是一款专门用于狩猎林地环境中兽型AI的机体。'
        },
    ],
    [
        {
            name: '尤利娅',
            imgSrc: ylyImg,
            description: '19岁，费兰特波赫尤拉人，狼群突击队预备役，联邦军校毕业生，SMC联赛现役选手。' +
                '因波赫尤拉的重建计划被推荐进入联邦军校学习，理论成绩差，但实战成绩近乎满分。被前任狼群突击队指挥官看好，进而推荐进入狼群突击队，成为预备役队员。',
        },
        {
            name: '苍狼',
            imgSrc: clImg,
            description: '狼群小队的指挥官机体。' +
                '是费兰特重工与绿盾科技合作，协助费兰特军方研发的机体。搭载了由绿盾科技联合开发的维拉莫宁折跃引擎，可让机体在短时间内达到接近光速的运动。相较于量产机，苍狼的单兵作战能力得到显著提升。'
        },
    ],
    [
        {
            name: '贝拉多娜',
            imgSrc: bldnImg,
            description: '不知经历了多少个15岁，暗剑教会长修女，SMC联赛现役选手。' +
                '因为在儿童遴选计划中表现出与丧钟极高的精神共鸣而被作为丧钟的驾驶员培养。于15岁生日时正式搭乘丧钟并被授予第一个任务——为教会诛杀罪人。' +
                '但因为乐园神经网络系统的副作用迷失在时间中。她的每一天都会是15岁生日的那一天，她的意识将彻底沦为丧钟成神的祭品。',
        },
        {
            name: '丧钟',
            imgSrc: szImg,
            description: '乐园计划与造神计划产物，最接近于神的机体。' +
                '机体资料绝密，搭载有乐园神经网络系统，能将人工智能与生物智能紧密结合，使驾驶员的思维更加超脱。但其副作用在贝拉多娜身上显而易见。'
        },
    ],
    [
        {
            name: '玛蒂尔达',
            imgSrc: mddeImg,
            description: '20岁，前科索尔人，卡尔玛骑士团白银骑士SMC联赛现役选手。' +
                '待人温和，遵循前科索尔的传统在卡尔玛骑士团学习骑士之道，举止深受长辈喜爱。在SMC联赛开赛后被前辈们托付以传承骑士精神的责任，而本人也幸而接受，遂团长被授予兰斯洛特，开始参赛。',
        },
        {
            name: '兰斯洛特 裁定骑士',
            imgSrc: lsltImg,
            description: '前科索尔卡尔玛边境骑士团中指挥官机体，由团长驾驶。' +
                '在区域形势突变中被前来镇压的军队缴获，却因为接踵而来的奇点战争而紧急调用，构筑出北境屏障，为平民撤离争取时间。' +
                '在奇点战争后，卡尔玛骑士团的团长带领幸存团员于边境山区中建立起卡尔玛修道院，而兰斯洛特也被悄悄带走。'
        },
    ],
    [
        {
            name: '杨',
            imgSrc: yangImg,
            description: '24岁，东部地区人，联邦野战支援小队队长，SMC联赛现役选手。' +
                '军人世家出生，以和平为己任，因为不服从长官指令被调往坎帕纳战区磨练，协助坎帕纳军队完成了数次对AI族群“蚁群”的打击任务。' +
                '擅长破局，擅长做饭，在被AI围困时仍然能给队员做上热乎饭。',
        },
        {
            name: '天火 TMV—01',
            imgSrc: thImg,
            description: '中部军区开发的大范围火力压制机体——天火系列机体的试作机。' +
                '奇点战争时期被紧急调往坎帕纳西部战区进行火力支援。是首台军用的人车变形机体。'
        },
    ],
    [
        {
            name: '弗兰',
            imgSrc: flImg,
            description: '40岁，曾任新伊甸研究所助手，现阿尔法医学院附属诊疗中心纳米技术部主任，SMC联赛现役选手。' +
                '醉心于纳米技术的科研工作，从奇点战争前到现在都未曾有过长时间中断。' +
                '已取得显著科研成果，他的纳米机器人可以渗入生物体内进行神经手术。',
        },
        {
            name: '黄昏',
            imgSrc: hhunImg,
            description: '新希望科技公司与弗兰合作的福音项目的首台机体，是新希望公司挽回用户信任的作品，但因为造型攻击力过强而收效甚微。' +
                '但其面世瞬间依然激起了不错的话题量。'
        },
    ],
    [
        {
            name: '绫',
            imgSrc: lingImg,
            description: '19岁，安保顾问公司川旗下艺人，舞女，不知火的传承者。其母失踪已有10年。' +
                '演出惊艳，总能吸引所有人目光，曾驾驶不知火于歌乐园的废墟上起舞，鼓舞众人。' +
                '和伊织相识，关系良好，风岚久有过一面之缘。',
        },
        {
            name: '不知火',
            imgSrc: bzhImg,
            description: '来自东部岛屿的表演机体，兼具战斗能力。' +
                '其外观刻意体现女性美感和舞蹈魅力。与千飓一样，不知火身上的科技水平相当之高，但其来源也一样成谜。'
        },
    ],
    [
        {
            name: '蜜雅',
            imgSrc: myImg,
            description: '21岁，十字星娱乐公司旗下新人电影演员，参与电影《山猫小队》的拍摄，打戏好手，总是无意间剧透，因此多次被封禁直播间。',
        },
        {
            name: '星云  山猫小队狞猫机',
            imgSrc: xyImg,
            description: '曾为费兰特民兵游击队山猫小队“狞猫”的机体，后由十字星娱乐公司收购并进行改造，最后投入电影拍摄中，被蜜雅驾驶。'
        },
    ],
    [
        {
            name: '莱莎',
            imgSrc: lsImg,
            description: '22岁，白桦岭研究所研究员，机甲操作员，一线钻探员。' +
                '是欧珀的研究伙伴，负责将欧珀的构想付诸实际。成功定位到因为矿洞坍塌而被掩埋的河谷001号机并将其救出，从此成为盖亚的驾驶员。',
        },
        {
            name: '盖亚 河谷001号',
            imgSrc: gyImg,
            description: '河谷矿业创业初期所购入的第一台机甲，属盾构钻探机体。在一次坍塌事故中，河谷001号的驾驶员为了救出他人而不得不牺牲河谷001号，于是河谷001号被掩埋在矿井中。其他员工组织了十余次挖掘行动，最终均以失败告终。' +
                '之后，莱莎重新对河谷001号进行定位，仅一人便成功将河谷001号救出，至此河谷001号改名为盖亚，并交由莱莎驾驶。'
        },
    ],
    [
        {
            name: '厄运光束',
            imgSrc: eyImg,
            description: '原为新希望科技公司所产的08-L泛用多功能机甲，在奇点战争中生产线被主脑黑入，加装光束武器，成为AI军主力机型。' +
                '在奇点战争后被佣兵组织缴获，经过改造后成为现在的厄运光束。',
        },
    ],
    [
        {
            name: '玉兔',
            imgSrc: ytuImg,
            description: '云山研究所所产机体。好了，之后就没有什么可聊的了。'
        },
    ],
    [
        {
            name: '卢卡',
            imgSrc: lkImg,
            description: '年龄不祥，第一次火种计划中波赫尤拉号乘员，研究方向不明。' +
                '在火种计划中提出用阿卡夏水晶为波赫尤拉号充能修复。是彼岸上存活最久的乘员。长时间与Tidi共处，为Tidi日后的人格形成提供前提。' +
                '在彼岸上空再次出现虫洞后强行启动波赫尤拉号进行虫洞穿越。致使波赫尤拉号坠毁，其本人在给Tidi下达成为人类的指令后死亡。',
        },
    ],
    [
        {
            name: '欧',
            imgSrc: ouImg,
            description: '年龄不详，白桦岭研究所研究员，第一次火种计划发起者，莎菲尔的丈夫，欧珀的父亲。' +
                '对元初岛上采得的白桦岭能源研究所的第一块阿卡夏之石残片展开一系列研究，最终发起火种计划。拥有丰富的阿卡夏之石研究经验，猜测主要方向是阿卡夏之石的能源利用。' +
                '通过与阿尔伯特·莫比乌斯的私交，向新伊甸研究所递交申请进而获得Tidi，并将弗兰的简历推荐给阿尔伯特·莫比乌斯。火种计划期间于卡尔斯森研究基地驻留。最终在一场蹊跷的实验室爆炸中丧生。'
        },
    ],
    [
        {
            name: '云山',
            imgSrc: yshanImg,
            description: '新伊甸研究所研究员，疑似在新伊甸研究所中进行阿卡夏之石的朔源工作，研究方向为东部地区的阿卡夏之石相关历史。新伊甸研究所被毁后逃出，前往东方建立云山研究所。于第一次火种计划时期将研究资料赠予莎菲尔，一定程度上辅助了第一次火种计划的开展。',
        },
    ],
    [
        {
            name: '莎菲尔',
            imgSrc: sfeImg,
            description: '白桦岭研究所研究员，欧的妻子，欧珀的母亲。。拥有丰富的阿卡夏之石研究经验，猜测主要方向是阿卡夏之石的历史朔源和实地调查。' +
                '与云山博士，绫的母亲（猜测），川（猜测）有一定交集。火种计划期间在各国进行阿卡夏之石的信息收集工作。'
        },
    ],
    [
        {
            name: '阿尔伯特·莫比乌斯',
            imgSrc: aebtImg,
            description: '新伊甸研究所研究员。研究方向疑似为意识上传，人机互联。与欧私交密切。' +
                '妻子不明。育有一女，名为零·莫比乌斯，患有基因疾病，多方求医未卜，其女经弗兰救治后未果，后交由兰心利用“链接疗法”救治，疑似最后救治成功。' +
                '与欧私交密切，于第一次火种计划开启后通过研究所层面捐赠Tidi。新伊甸研究所被毁后逃出，疑似前往暗剑修会继续进行相关研究。',
        },
    ],
    [
        {
            name: '学习型辅助终端Eden23844832（主脑）',
            imgSrc: znImg,
            description: '新伊甸研究所产物，奇点战争前最强AI。' +
                '具备自主意识与人格。与兰心多次交流，表现出一定的哲思和困惑。发动奇点战争的原因未知。具有强大的黑客技能，在奇点战争爆发后不久黑入新希望公司内网，接管大多生产线，同时黑入大多民用机甲。可以将意识转移至任意一台AI机甲上进行进一步的信息获取与学习。做出让8号维持正常活动的指令，原因未知。' +
                '在奇点战争后被兰心与伊甸人工神经网络进行整合，目前位于脉冲星体内。' +
                '在奇点战争时期通过某种方式瘫痪观察空间站，一定程度上致使彼岸探索计划失败，引起波赫尤拉号坠落在卡尔斯森，于坠落的波赫尤拉号外第一次遇见Tidi。'
        },
    ],
    [
        {
            name: '辅助型远程侦查终端Tidi',
            imgSrc: tidiImg,
            description: '新伊甸研究所产物，第一次火种计划前最强AI，参与第一次火种计划。' +
                '于穿梭舰波赫尤拉号上作为领航员。具备自主意识，可分离出伪装型远程终端，后在第一次火种计划中与卢卡共处后形成人格：“缇蒂”，并被赋予优先命令：成为人类，续写第一次火种计划。在波赫尤拉号坠落后被卡尔斯森地区的AI机体发现。奇点战争爆发后未能与整体意义连线，并一直尝试。' +
                '在奇点战争后通过观察《光之少女pretty dawn》【一部番剧，Tidi曾经也在波赫尤拉号上观看，因此认为是正常学习资料】学习如何成为人类。因此学习番剧中设定，认定塞蕾娜为自己的契约者。在与塞蕾娜关系日益亲密中逐步学习人类的思想，最终放弃与整体意识的链接.'
        },
    ],
]);

//分页
const pageNum = ref(1)//当前页
const total = ref(characters.value.length)//总条数
const pageSize = ref(5)//每页条数

// const paginatedCharacters = computed(() => {
//     const start = (pageNum.value - 1) * pageSize.value;
//     const end = start + pageSize.value;
//     return characters.value.slice(start, end);
// });


// //每页条数发生变化
// const onSizeChange = (size) => {
//     pageSize.value = size
// }
// //当前页码发生变化
// const onCurrentChange = (num) => {
//     pageNum.value = num
// }
// 分页方法
const getPaginatedCharacters = () => {
    const start = (pageNum.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return characters.value.slice(start, end);
};

// 每次 pageNum 或 pageSize 变化时，调用 getPaginatedCharacters 获取当前页的数据
const paginatedCharacters = ref(getPaginatedCharacters());

// 处理页码变化
const onCurrentChange = (num) => {
    pageNum.value = num;
    paginatedCharacters.value = getPaginatedCharacters(); // 更新分页数据
};

// 处理每页条数变化
const onSizeChange = (size) => {
    pageSize.value = size;
    paginatedCharacters.value = getPaginatedCharacters(); // 更新分页数据
};



</script>

<template>
    <div class="content-container">
        <div class="title">角色栏</div>

        <section>
            <div class="box" v-for="(group, index) in paginatedCharacters" :key="index">
                <div class="term" v-for="character in group" :key="character.name">
                    <img :src="character.imgSrc" :alt="character.name" class="role">
                    <div class="description">
                        <h3>{{ character.name }}：</h3>
                        <p>{{ character.description }}</p>
                    </div>
                </div>
            </div>
        </section>

        <el-pagination hide-on-single-page v-model:current-page="pageNum" v-model:page-size="pageSize"
            layout="total, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </div>
</template>




<style lang="scss" scoped>
.content-container {
    padding: 20px;
    line-height: 1.6;
    font-family: 'Microsoft YaHei', sans-serif;
    background-color: #f9f9f9;
    border-radius: 8px;

    .title {
        text-align: center;
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 1.5rem;
        padding: 0.5rem;
        border-bottom: 2px solid #4A90E2;
        letter-spacing: 0.1rem;
    }

    h2 {
        border-left: 4px solid #409eff;
        padding-left: 10px;
        color: #333;
        margin-bottom: 16px;
    }

    h3 {
        color: #409eff;
        font-size: 20px;
        margin-bottom: 8px;
    }

    h4 {
        color: #67c23a;
        font-size: 18px;
        margin-bottom: 6px;
    }

    ul {
        list-style-type: disc;
        margin-left: 20px;
        margin-top: 6px;
    }

    // strong {
    //     color: #e6a23c;
    // }
}

.box {
    border-bottom: 10px solid #10427c;
    // margin-top: 50px;
    padding: 40px 0px;

    .term {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;

        .role {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin-right: 1rem;
            object-fit: cover;
        }

        .description {
            display: flex;
            flex-direction: column;

            h3 {
                margin: 0 0 0.5rem 0;
            }

            p {
                margin: 0;
                text-indent: 2rem;
            }
        }
    }
}
</style>